View

Android 自定义 View 之 LeavesLoading

Posted by LinYaoTian on 2019-02-01

1.前言

前天的浏览 GitHub 时发现一个模仿 Gif 的 Loading 特效的项目，感觉效果很不错，也比较有创意，如下：

GitHub 上好几个做这个效果的项目，但是很少有完全实现的，有的还有 Bug，于是花了 2 天实现了一下。

效果如下：

GitHub 项目在这里 LeavesLoading

2. 分析

实现要求：

  • 叶子
    • 随机产生
    • 飘动轨迹为正弦函数，并且随机振幅
    • 飘动时伴随自旋转，更符合物理规律
    • 遇到进度条似乎是融入的
  • 风扇
    • 可旋转
    • Loading == 100% 时显示一个动画
  • 细节
    • 风扇和叶子自适应 View 大小
    • 叶子在视觉上不能飘出 RountRect 边界

3. 核心实现

3.1 随机产生叶子

本质是事先产生一定数量叶子，这些叶子的漂动时的振幅、相位、旋转方向等等都是随机的，并且飘动是周期性地即叶子飘动到最左边时，又重新回到最右边。

Leaf 类：

1
2
3
4
5
6
7
8
private class Leaf{
    float x,y;//坐标
    AmplitudeType type;//叶子飘动振幅
    int rotateAngle;//旋转角度
    RotateDir rotateDir;//旋转方向
    long startTime;//起始时间
    int n;//初始相位
}

Leaf 生成方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Leaf generateLeaf(){
    Leaf leaf = new Leaf();
    //随机振幅
    int randomType = mRandom.nextInt(3);
    switch (randomType){
      case 0:
        //小振幅
        leaf.type = AmplitudeType.LITTLE;
        break;
      case 1:
        //中等振幅
        leaf.type = AmplitudeType.MIDDLE;
        break;
      default:
        //大振幅
        leaf.type = AmplitudeType.BIG;
        break;
    }
    //随机旋转方向
    int dir = mRandom.nextInt(2);
    switch (dir){
      case 0:
        //逆时针
        leaf.rotateDir = RotateDir.ANTICLOCKWISE;
        break;
      default:
        //顺时针
        leaf.rotateDir = RotateDir.CLOCKWISE;
        break;
    }
    //随机起始角度
    leaf.rotateAngle = mRandom.nextInt(360);
    leaf.n = mRandom.nextInt(20);
    mAddTime += mRandom.nextInt((int)mLeafFloatTime);
    leaf.startTime = System.currentTimeMillis() + mAddTime;
    return leaf;
}

3.2 叶子飘动轨迹为正弦函数

确定 Leaf 在某个时刻的坐标 ( x , y )： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
  * 获取叶子的（x,y）位置
  * @param leaf 叶子
  * @param currentTime 当前时间
  */
private void getLeafLocation(Leaf leaf,long currentTime){
    long intervalTime = currentTime - leaf.startTime;//飘动时长
    if (intervalTime <= 0){
      // 此 Leaf 还没到飘动时间
      return;
    }else if (intervalTime > mLeafFloatTime){
      // Leaf 的飘动时间大于指定的飘动时间，即叶子飘动到了最左边，应回到最右边
      leaf.startTime = currentTime + new Random().nextInt((int)mLeafFloatTime);
    }
    // 计算移动因子
    float fraction = (float) intervalTime / mLeafFloatTime;
    leaf.x = (1-fraction)*mProgressLen;
    leaf.y = getLeafLocationY(leaf);

    if (leaf.x <= mYellowOvalHeight / 4){
      //叶子飘到最左边，有可能会超出 RoundRect 边界，所以提前特殊处理
      leaf.startTime = currentTime + new Random().nextInt((int)mLeafFloatTime);
      leaf.x = mProgressLen;
      leaf.y = getLeafLocationY(leaf);
    }
}

要想让 Leaf 飘动轨迹为正弦函数，关键在于确定 Leaf 的 Y 轴坐标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
  * 获取叶子的Y轴坐标
  * @param leaf 叶子
  * @return 经过计算的叶子Y轴坐标
  */
 private float getLeafLocationY(Leaf leaf){
     float w = (float) (Math.PI * 2 / mProgressLen);//角频率
     float A;//计算振幅值
     switch (leaf.type){
         case LITTLE:
             A = mLeafLen/3;
             break;
         case MIDDLE:
             A = mLeafLen*2/3;
             break;
         default:
             A = mLeafLen;
             break;
     }
     // (mHeight-mLeafLen)/2 是为了让 Leaf 的Y轴起始位置居中
     return (float) (A * Math.sin(w * leaf.x + leaf.n)+(mHeight-mLeafLen)/2);
 }

3.3 叶子飘动时自旋转

这里就涉及到了 Leaf 的绘制，其实 Gif 中的叶子和风扇都可以使用 Canves 直接绘制图案，但是这样就会有两个问题：

  1. 难画：想要画出满意图形，并且还要旋转、缩放、平移可要下一番功夫。
  2. 灵活性低：如果想换其他样式又得重新设计绘制过程。

因此这里采用 Canves.drawBitmap() 的方式绘制，直接使用已有的图片作为叶子和风扇，同时利用 Canves.drawBitmap() 的一个重载的方法可以很方便的实现旋转、缩放、平移：

1
void drawBitmap(Bitmap bitmap,  Matrix matrix, Paint paint) ;

就是通过这里的 Matrix 矩阵，它内部封装了 postScale()、postTranslate 、postRotate() 等方法，可以帮助我们快速的对 Bitmap 进行旋转、缩放、平移还有其他操作。使用时要记得配合 Canves 的 save() 和 restore() 使用，否则达不到想要的效果。

对这方面不熟的朋友可以看看 HenCoder 的自定义 View 教学 1-4 。

绘制 Leaf 的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
private void drawLeaves(Canvas canvas){
    long currentTime = System.currentTimeMillis();
    for (Leaf leaf : mLeafList) {
        if (currentTime > leaf.startTime && leaf.startTime != 0){
          // 获取 leaf 当前的坐标
          getLeafLocation(leaf,currentTime);
          canvas.save();
          Matrix matrix = new Matrix();
          // 缩放 自适应 View 的大小
          float scaleX = (float) mLeafLen / mLeafBitmapWidth;
          float scaleY = (float) mLeafLen / mLeafBitmapHeight;
          matrix.postScale(scaleX,scaleY);
          // 位移
          float transX = leaf.x;
          float transY = leaf.y;
          matrix.postTranslate(transX,transY);
          // 旋转
          // 计算旋转因子
          float rotateFraction = ((currentTime - leaf.startTime) % mLeafRotateTime)
            /(float)mLeafRotateTime;
          float rotate;
          switch (leaf.rotateDir){
            case CLOCKWISE:
              //顺时针
              rotate = rotateFraction * 360 + leaf.rotateAngle;
              break;
            default:
              //逆时针
              rotate = -rotateFraction * 360 + leaf.rotateAngle;
              break;
          }
          // 旋转中心选择 Leaf 的中心坐标
          matrix.postRotate(rotate,transX + mLeafLen / 2,transY + mLeafLen / 2);
          canvas.drawBitmap(mLeafBitmap,matrix,mBitmapPaint);
          canvas.restore();
        }
  }

3.4 Loading == 100% 出现动画

增加一个判断字段 isLoadingCompleted ，在 onDraw() 中选择对应绘制策略。

isLoadingCompleted 在 setProgress() 中根据 progress 设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
  * 设置进度（自动刷新）
  * @param progress 0-100
  */
 public void setProgress(int progress){
     if (progress < 0){
         mProgress = 0;
     }else if (progress > 100){
         mProgress = 100;
     }else {
         mProgress = progress;
     }
     if (progress == 100){
         isLoadingCompleted = true;
     }else {
         isLoadingCompleted = false;
     }
     // 255 不透明
     mCompletedFanPaint.setAlpha(255);
     postInvalidate();
 }

LeavesLoading.onDraw() 部分实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Override
 protected void onDraw(Canvas canvas) {
     super.onDraw(canvas);
     ......
     if (isLoadingCompleted){
         //绘制加载完成特效
         drawCompleted(canvas);
     }else {
         //绘制扇叶
         drawFan(canvas,mFanLen,mBitmapPaint);
     }
     //刷新
     postInvalidate();
 }

drawCompleted() 实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
private void drawCompleted(Canvas canvas) {
    // 每次绘制风扇透明度递减10
    int alpha = mCompletedFanPaint.getAlpha() - 10;
    if (alpha <= 0){
        alpha = 0;
    }
    mCompletedFanPaint.setAlpha(alpha);
    // 文字透明度刚好与风扇相反
    mCompletedTextPaint.setAlpha(255-alpha);
    // 计算透明因子
    float fraction = alpha / 255f;
    // 叶片大小 和 文字大小 也是相反变化的
    float fanLen = fraction * mFanLen;
    float textSize = (1 - fraction) * mCompletedTextSize;
    mCompletedTextPaint.setTextSize(textSize);
     //测量文字占用空间
    Rect bounds = new Rect();
    mCompletedTextPaint.getTextBounds(
            LOADING_COMPLETED,
            0,
            LOADING_COMPLETED.length(),
            bounds);
  	// 与 drawLeaf() 相似，不再赘述
    drawFan(canvas, (int) fanLen, mCompletedFanPaint);
    //画文字
    canvas.drawText(
            LOADING_COMPLETED,
            0,
            LOADING_COMPLETED.length(),
            mFanCx-bounds.width()/2f,
            mFanCy+bounds.height()/2f,
            mCompletedTextPaint);
}

流程：计算风扇和文字透明度 -> 计算风扇和文字大小以及文字占用空间 -> 绘制 ，注释写得比较清楚就不赘述了。

4. 结束

如果觉得 LeavesLoading 对您有任何帮助，希望可以在 GitHub 得到您的 Star ！

Thanks：